<template>
  <div class="flex flex-row items-center justify-between">
    <div class="flex flex-row items-center">
      <div class="pl-2 pr-1 h-full flex flex-row items-center">
        <el-image src="http://file.vict5220.top/yxLyGiPtp0__2025_03_19__15_09_34.ico?attname=favicon.ico"></el-image>
      </div>
      <div class="site-title flex flex-row items-center">
        <span class="gradient-text">SIMPLE PROJECT</span>
        <small class="site-subtitle">简单高效 极致便捷</small>
      </div>
    </div>
    <div class="p-2">
      <!-- <el-button @click="toApp">打开APP(H5)</el-button> -->
      <el-button class="rounded-full" @click="loginOut"><el-icon><SwitchButton /></el-icon>&nbsp;退出&nbsp;</el-button>
      <!-- <el-button @click="flushPermission">刷新权限</el-button>
                  <el-button @click="clearCache">清除缓存</el-button> -->
    </div>
  </div>
</template>

<script setup lang="ts" name="Title">
import { useApplicationServiceHooks } from '@/pages/application/applicationServiceHooks';
import type { KeyValue } from '@/types/KeyValueType';
import { keyValueGetByKey } from '@/utils/KeyValueUtils';
let {loginOut, reloadCache, clearCache, flushPermission} = useApplicationServiceHooks()

</script>

<style scoped>

.context{
  background: linear-gradient(to right, #1890ff, #1d39c4);
}

.main-header {
  /* background: linear-gradient(135deg, 
    rgba(255,255,255,0.96) 0%,
    rgba(245,248,252,0.98) 100%);
  backdrop-filter: blur(8px); */
  /* box-shadow: 0 4px 20px -6px rgba(0,0,0,0.1); */
  /* padding: 1.2rem 2rem; */
  position: relative;
  /* border-bottom: 1px solid rgba(0,0,0,0.05); */
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
}

.site-title {
  margin: 0;
  font: 500 2.2rem/1.2 'Segoe UI', 'Helvetica Neue', sans-serif;
  color: #2d3436;
  align-items: baseline;
  gap: 1rem;
  animation: titleEntrance 0.6s ease;
}

.gradient-text {
  background: linear-gradient(45deg, 
  #2d8cf0 30%,
  #6c5ce7 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  transition: all 0.3s ease;
}

.site-subtitle {
  font-size: 1.1rem;
  font-weight: 400;
  color: #666;
  opacity: 0.9;
  position: relative;
  top: -2px;
  transition: color 0.3s ease;
}

/* 悬停交互 */
.site-title:hover .gradient-text {
  background-position: 100% 50%;
}

.site-title:hover .site-subtitle {
  color: #2d8cf0;
}

/* 入场动画 */
@keyframes titleEntrance {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .site-title {
    /* flex-direction: column; */
    /* align-items: flex-start; */
    gap: 0.4rem;
    font-size: 1.8rem;
  }
  
  .site-subtitle {
    font-size: 1rem;
    top: 0;
  }
  
  .main-header {
    /* padding: 1rem; */
  }
}
</style>
